
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>游戏详情</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color:#1D1F27;
        }
        .leftoperator{
            margin-bottom: 10px;
            width: 830px;
            background-color:#282931;
            padding: 20px;
            box-sizing: border-box;
        }
        #mastermap img{
            height: 457px;

        }
        #bigdiv{
            width: 1200px;
            margin: 0 auto;
            height: 1500px;
            position: relative;
            top: 150px;
            right: 48vw;
            transform: translate(50%);
        }
        #gamename{
            color: #ffffff;
            font-size: 28px;
            font-weight: 600;
            text-align: left;
            line-height: 40px;
            display: block;
        }
        #gameEnglishnamename{
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
            text-align: left;
            height: 22px;
            line-height: 22px;
            margin-bottom: 5px;
        }
        #gamephotoleft{
            /* height: 1300px; */
            width: 830px;
            margin-bottom: 20px;
            float: left;

        }
        #gamephotoright{
            width: 350px;
            height: 900px;
            float: right;
            margin-bottom: 40px;
        }
        #gamephoto{
            width: 790px;
            height: 433px;
        }
        .gamecontentleft{
            font-size: 20px;
            line-height: 28px;
            color: #FFFFFF;
            text-align: left;
            height: 28px;
        }
        #gamephotoleft p{
            display: block;
            color: #BFBFC2;
        }

        #gamedevelopers{
            background-color:#282931;
            margin-bottom: 10px;
            width: 350px;
            height: 120px;
            box-sizing: border-box;
            padding: 20px;
        }
        #developers{
            height: 40px;
            width: 310px;
            /* background-color:red ; */
            display: block;
            line-height: 40px;
        }
        #issuedate{
            height: 40px;
            width: 310px;
            /* background-color: yellow; */
            display: block;
            line-height: 40px;
        }




        #gameprice{
            box-sizing: border-box;
            padding: 27px 20px 0 20px;
            width: 350px;
            height: 69px;
            background-color: #282931;
        }
        .gameprice{
            line-height: 42px;
            height: 42px;
        }
        #gamepriceleft{
            font-size: 24px;
            float: left;
            color: #ff6900;
        }
        #gamepriceright{
            font-size: 20px;
            font-weight: 600;
            width: 104px;
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            float: right;
        }
        #gamepricecenter{
            width: 65px;
            margin-right: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.3);
            text-decoration: line-through;
            float: right;
        }
        #gamedream{
            box-sizing: border-box;
            width: 350px;
            height: 72px;
            padding: 10px 20px 17px 20px;
            background-color:#282931 ;
        }
        #joingamedream{
            width: 100px;
            font-size: 16px;
            background-color:#EB6100 ;
            height: 45px;
            border: none;
            outline: none;
            box-sizing: border-box;
            margin-right: 20px;
            border-radius: 2px;
            color: #fff;
            float: left;
            text-align: center;
            line-height: 45px;
        }
        #buy{
            width: 80px;
            background-color: #508BF3;
            font-size: 16px;
            height: 45px;
            border: none;
            outline: none;
            box-sizing: border-box;
            border-radius: 2px;
            color: #fff;
            float: left;
            text-align: center;
            line-height: 45px;
        }


        /* 玩家评论 */

        #gamecomment{
            width: 790px;
            /* 不确定 */
            /* height: 180px; */
            background-color:#1D1F27;
        }
        #gamecomment:after{
            content:"";
            display:table;
            clear:both;
        }
        #useravatar{
            height: 86px;
            width: 240px;
            float: left;
            box-sizing: border-box;
            padding: 18px;
            /* background-color: yellow; */
        }
        #avatar{
            height: 50px;
            width: 50px;
            margin-right: 10px;
            display: inline-block;
            cursor: pointer;
            /* background-color: red; */
            float: left;
        }
        #username{
            height: 38px;
            width: 135px;
            float: left;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 15px;
            font-size: 16px;
            float: left;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: block;
            color:#BDBDB6;
        }
        #usercomment{
            width: 540px;
            float: left;
            box-sizing: border-box;
            padding: 15px 5px;
            /* background-color: red; */
        }
        #time{
            width: 520px;
            height: 30px;
            line-height: 30px;
            color: #909183;
            /* background-color: #000000; */
        }
        #usercomment p{
            display: block;
            color: #ffffff;
        }
        #pinglun{

        }
        .kaifa{
            color: #949498;
        }
        .kaifadata{
            color: #DBFFFF;
        }
    </style>
</head>
<body>
<%@ include file="../common/game-header.jsp" %>
<div id="bigdiv">
			<span id="gamename">
				${game.name}
			</span>
    <div id="gameEnglishnamename">
        ${game.nickname}
    </div>
    <div id="gamephotoleft">
        <div class="leftoperator">
            <div id="gamephoto">
                <img src="${ game.image }" width="780px" height="430px">
            </div>
        </div>
        <div class="leftoperator">
            <div class="gamecontentleft">
                游戏简介
            </div>
            <p>
                ${game.content}
            </p>
        </div>

<%--        <div class="leftoperator">--%>
<%--            <h3 class="gamecontentleft">玩家评价</h3>--%>

<%--            <div style="margin-top: 20px;">--%>
<%--                <c:if test="${ onlineUser ne null }">--%>
<%--                    <form action="${ bp }/comment?method=usercomment&gameid=${ game.id }" method="post">--%>
<%--                        <input type="hidden" name="user_id" value="${ onlineUser.id }"/>--%>
<%--                        <p style="text-align: left;">评论：</p>--%>
<%--                        <textarea name="t1" style="width: 600px; height: 50px;"></textarea>--%>
<%--                        <p style="text-align: left;"><input type="submit" value="发表评论" style="color: #666;"> <input type="reset" value="清空" style="color:red;"></p>--%>
<%--                    </form>--%>
<%--                </c:if>--%>
<%--                <c:if test="${ onlineUser eq null }">--%>
<%--                    <a href="${ bp }/user/login.jsp">登录之后才可以评论</a>--%>
<%--                </c:if>--%>
<%--            </div>--%>



<%--            <div id="gamecomment">--%>
<%--                <c:forEach items="${ comment }" var="v">--%>
<%--                    <div id="useravatar">--%>
<%--                        <div id="avatar">--%>

<%--                        </div>--%>
<%--                        <div id="username">${ v.username }</div>--%>
<%--                    </div>--%>

<%--                    <div id="usercomment">--%>
<%--                        <div id="time">${ v.create_time }</div>--%>
<%--                        <p id="pinglun">${ v.content }</p>--%>
<%--                    </div>--%>
<%--                </c:forEach>--%>
<%--            </div>--%>

<%--        </div>--%>
    </div>



    <!-- 右边部分 -->
    <div id="gamephotoright">
        <div id="gamedevelopers">
            <div id="developers">
						<span class="kaifadata">
							开发商&nbsp;&nbsp;&nbsp;
						</span>&nbsp;&nbsp;&nbsp;
                <span class="kaifa">
							${game.publisher_name}
						</span>
            </div>
            <div id="issuedate">
						<span class="kaifadata">
							发行时间&nbsp;&nbsp;&nbsp;
						</span>&nbsp;&nbsp;&nbsp;
                <span class="kaifa">
							${game.time}
						</span>
            </div>
        </div>
        <div id="gameprice">
            <div id="gamepriceleft" class="gameprice">￥${game.price}</div>
            <c:if test="${game.off ne 0}">
                <div id="gamepriceright" class="gameprice">-${game.off}0%</div>
                <div id="gamepricecenter" class="gameprice">￥${game.preprice}</div>
            </c:if>

        </div>
        <div id="gamedream">
            <div type="button" id="joingamedream" style="cursor: pointer">加入愿望单</div>
            <div type="button" id="buy" style="cursor: pointer">立即购买</div>
        </div>
    </div>
</div>
<!-- 公共底部 -->
<%@ include file="../common/footer.jsp" %>


<script src="${ bp }/static/js/jquery-3.5.1.js"></script>
<script type="text/javascript">

    $(function (){


        //加入愿望单
        $('#joingamedream').click(function (){

            //调用ajax接口请求
            $.ajax({
                url:'${bp}/list?method=addDream&gameid=${ game.id }',
                type:'post',
                dataType:'json',
                success:(res) =>{
                    if(res.code === 1){
                        alert('请登录');
                        location.href="${bp}/user/login.jsp"
                    }else {
                        alert('加入成功')
                    }
                },
                error: () => {
                    console.log('接口请求错误');
                }
            });

        })

        //购买
        $('#buy').click(function (){

            //调用ajax接口请求
            $.ajax({
                url:'${bp}/list?method=buy&gameid=${ game.id }',
                type:'post',
                dataType:'json',
                success:(res) =>{
                    if(res.code === 1){
                        alert(res.msg);
                        location.href="${bp}/user/login.jsp"
                    }else if (res.code === 2) {
                        alert(res.msg);
                    }else {
                        alert('购买成功')
                    }
                },
                error: () => {
                    console.log('接口请求错误');
                }
            });

        })

    })

    <%--//调用ajax接口请求--%>
    <%--$.ajax({--%>
    <%--    url:'${bp}/comment?method=show&gameid=${ game.id }',--%>
    <%--    type:'post',--%>
    <%--    dataType:'json',--%>
    <%--    async:false,--%>
    <%--});--%>

</script>


</body>
</html>
